<template>
    <div class="warp">
        <div class="notice">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="验证码" prop="mobileCode">
                            <el-input v-model="form.mobileCode" placeholder="请输入验证码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button style="float: right; width: 100%" type="primary" @click="sendCode">{{ codeText
                            }}</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="新密码" prop="newPassword">
                            <el-input v-model="form.newPassword" show-password placeholder="请输入密码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="flex-center" style="margin-top: 20px">
                        <el-button class="btn" type="primary" @click="codeVerify">继 续</el-button>
                    </el-col>
                    <el-col :span="24" class="flex-center" style="margin-top: 20px">
                        <el-button @click="$router.back()">返 回</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { modifyPwdByMobile, sendMobileCode } from "@/api/login";
import md5 from "js-md5";
export default {
    name: "externalComplaintLogin",
    data() {
        return {
            loading: true,
            form: {},
            rules: {
                phone: [
                    {
                        required: true,
                        message: "手机号不能为空",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号",
                        trigger: "blur",
                    },
                ],
                mobileCode: [
                    {
                        required: true,
                        message: "验证码不能为空",
                        trigger: "blur",
                    },
                ],
                newPassword: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        pattern:
                            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/,
                        message:
                            "请输入8位以上数字、小写字母、大写字母和特殊字符",
                        trigger: "blur",
                    },
                ],
            },
            checked: false,
            codeText: "获取验证码",
            codeCd: 0,
            timer: null,
            // TEST123
        };
    },
    watch: {},
    created() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    methods: {
        sendCode() {
            if (this.codeCd > 0) return;
            // 进入倒计时
            this.codeCd = 60;
            if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(this.form.phone)) {
                return this.$message.error("请输入正确的手机号");
            }
            sendMobileCode({
                phone: this.form.phone,
            }).then((res) => {
                this.$message.success("发送成功");
                this.form.mobileId = res.data.mobileId;
                this.timer = setInterval(() => {
                    this.codeText = "重新发送(" + this.codeCd + ")";
                    if (this.codeCd <= 0) {
                        clearInterval(this.timer);
                        this.codeText = "获取验证码";
                        return;
                    }
                    this.codeCd--;
                }, 1000);
            });
        },
        codeVerify() {
            console.log("this.form", this.form);
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    modifyPwdByMobile({
                        ...this.form,
                        newPassword: md5(this.form.newPassword),
                    }).then((res) => {
                        this.$message.success("密码修改成功");
                        this.$router.back();
                    });
                }
            });
        },
    },
};
</script>

<style scoped lang="scss">

.borderLine {
    width: 100%;
    border-top: 1px #cccccc dashed;
}

.img1 {
    width: 100%;
}

.img2 {
    position: absolute;
    right: 0;
    width: 70%;
    bottom: 0;
}

.ywtb {
    position: absolute;
    top: 60vh;
    left: 0;
    right: 0;
}

.notice {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    width: 800px;
    margin: 0 auto 30px;
    background: #fff;
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 30px;

    .title {
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
    }

    .content {
        margin-bottom: 20px;
        height: 500px;
        overflow-y: scroll;

        p {
            font-size: 14px;
            color: #d9001b;
            line-height: 30px;
        }
    }

    .login-form {
        width: 500px;
        margin: 0 auto;

        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.btn {
    cursor: pointer;
    display: block;
    z-index: 2;
    width: 300px;
    height: 40px;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 10px;
}
</style>
